<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<style>
    #tabs {
        text-align: center;
        padding-left: 10px;
        padding-bottom: 20px;
    }

    .box {
        width: 100px;
        height: 30px;
        background-color: #eee;
        font-size: 16px;
        text-align: center;
        line-height: 30px;
        border-radius: 8px;
        cursor: pointer;
    }

    .actives {
        background-color: #56d7ab;
        box-shadow: 0 4px 0 #5bc7a2;
    }

    #flowImg {
        padding-left: 18px;
        font-size: 16px;
    }

    #flowImg .blodFont {
        font-weight: bold;
    }

    #flowImg span {
        display: inline-block;
        width: 30px;
        width: 30px;
        line-height: 30px;
        text-align: center;
        background-color: #0E89F0;
        color: #fff;
        border-radius: 50%;
    }

    .greenBg {
        background-color: #0E89F0 !important;
        color: #fff !important;
    }


</style>

<div id="tabs" class="row">
    <div class="col-xs-2">
        <div class="box actives">详细信息</div>
    </div>
    <div class="col-xs-2">
        <div class="box">流程记录</div>
    </div>
</div>
<div id="details">
    <form:form commandName="taskjob" cssClass="form-horizontal" role="form" onsubmit="return false;">
        <div class="form-group">
            <label class="col-sm-2 control-label no-padding-right" for="taskName">*任务标题</label>
            <div class="col-sm-4">
                <input type="text" name="taskName" id="taskName" placeholder="任务名称" value="${taskjob.taskName}"
                       class="form-control " required readonly>
            </div>
            <label class="col-sm-2 control-label no-padding-right" for="taskType">*事项类型</label>
            <div class="col-sm-4">
                <input type="text" name="taskType" id="taskType" placeholder="项目名称" value="${taskjob.taskType}"
                       class="form-control " required readonly>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label no-padding-right" for="taskContent">*内容事项</label>
            <div class="col-sm-10">
            <textarea rows="5" id="taskContent" name="taskContent" placeholder="任务内容"
                      class="form-control " required readonly>${taskjob.taskContent} </textarea>
            </div>
        </div>
        <div class="form-group">
                <%--   <label class="col-sm-2 control-label no-padding-right" for="planStartDate">开始时间</label>
                   <div class="col-sm-4">
                       <input type="text" name="planStartDate" id="planStartDate" placeholder="计划开始时间"
                              value="${taskjob.planStartDate}" class="form-control date-picker" required readonly>
                   </div>--%>
            <label class="col-sm-2 control-label no-padding-right" for="planEndDate">办理时限</label>
            <div class="col-sm-4">
                <input type="text" name="planEndDate" id="planEndDate" placeholder="计划结束时间"
                       value="${taskjob.planEndDate}"
                       class="form-control date-picker" required readonly>
            </div>
            <label class="col-sm-2 control-label no-padding-right" for=""></label>
            <div class="col-sm-4">
                <button class="btn btn-sm btn-primary" style="width: 100%;">下载附件</button>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label no-padding-right" for="respDept">承办单位</label>
            <div class="col-sm-4">
                <input type="text" name="respDept" id="respDept" placeholder="承办单位" value="${taskjob.resDept}"
                       class="form-control " readonly>
            </div>
            <label class="col-sm-2 control-label no-padding-right" for="respUser">承办人</label>
                <%--<div class="col-sm-4">
                    <input type="text" name="respUser" id="respUser" placeholder="承办人（科局、乡镇）" value="${taskjob.resUser}"
                           class="form-control require required " >
                </div>--%>
            <div class="col-sm-4">
                <select name="respUser" id="respUser" class="form-control" required>
                    <option value="${taskjob.resUser}">${taskjob.resUser}</option>
                    <c:forEach items="${bookUsers}" var="bookUsers">
                        <option value="${bookUsers.departUser}">${bookUsers.departUser}</option>
                    </c:forEach>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label no-padding-right" for="remind-obj">抄送对象</label>
            <div class="col-sm-4">
                <input type="text" name="remindObj" id="remind-obj" placeholder="抄送对象" value="${taskjob.remindObj}"
                       class="form-control ">
            </div>
            <label class="col-sm-2 control-label no-padding-right" for="fgLeader">分管领导</label>
            <div class="col-sm-4">
                <input type="text" name="fgLeader" id="fgLeader" placeholder="分管领导" value="${taskjob.fgLeader}"
                       class="form-control ">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label no-padding-right" for="endorseDepts">批转单位</label>
            <div class="col-sm-4">
                <select name="endorseDept" id="endorseDepts" class="form-control">

                    <option value="">${taskjob.endorseDept}</option>
                    <c:forEach items="${bookLists}" var="bookLists">
                        <option value="${bookLists.deptCode}">${bookLists.deptName}</option>
                    </c:forEach>
                </select>
            </div>
            <label class="col-sm-2 control-label no-padding-right" for="endorseUsers">*批转接收人</label>
            <div class="col-sm-4">
                    <%--<input type="text" name="endorseUser" id="endorseUser" placeholder="承办人（科局、乡镇）" value="${taskProcess.endorseUser}"--%>
                    <%--class="form-control " >--%>
                <select name="endorseUser" id="endorseUsers" placeholder="承办人（科局、乡镇）" class="form-control ">
                    <option value="">${taskjob.endorseUser}</option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label no-padding-right" for="taskResult">是否办结</label>
            <div class="col-sm-4">
                <label  class="control-label">
                    <input type="checkbox" name="taskResult" id="taskResult" class="ace ace-switch ace-switch-3" <c:if test="${taskjob.taskResult=='1'}">checked="checked"</c:if>>
                    <span class="lbl"></span>
                </label>
            </div>

            <label class="col-sm-2 control-label no-padding-right" for="isScore">绩效考核</label>
            <div class="col-sm-4">
                <label  class="control-label">
                    <input type="checkbox" name="isScore" id="isScore" class="ace ace-switch ace-switch-3"  <c:if test="${taskjob.isScore=='1'}">checked="checked"</c:if>>
                    <span class="lbl"></span>
                </label>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label no-padding-right" for="feedback">协调事项</label>
            <div class="col-sm-10">
            <textarea rows="5" id="feedback" name="feedback" placeholder="协调事项"
                      class="form-control "> ${taskProcess.feedback} </textarea>
            </div>
        </div>


        <%--任务id  隐藏--%>
        <input type="text" name="taskId" id="taskId" value="${taskjob.sysId}" hidden>
        <%--下载--%>
        <input type="text" name="taxproof" id="taxproof" value="${taskjob.taxproof}" hidden>
        <form:hidden path="sysId"/>
    </form:form>
</div>

<div id="flowImg" hidden>

    <c:forEach items="${listLine}" var="listLine">
        <div class="row">
            <div class="col-xs-2">
                <p class="blodFont">${listLine.stage}</p>
            </div>
            <div class="col-xs-1">
                <span>↓</span>
            </div>
            <div class="col-xs-4">
                <p class="blodFont">${listLine.respDept}</p>
                <p>${listLine.createDate}</p>

            </div>
            <div class="col-xs-3">
                <p>责任人:${listLine.respUser} </br>联系电话:${listLine.telphone}</p>
                <%--<p>经办人:${listLine.respUser} </br>联系电话:${listLine.respUser}</p>--%>
            </div>
            <div class="col-xs-2">
                <button class="btn  btn-default" data-id="${listLine.flowId}">催办</button>
            </div>
        </div>
    </c:forEach>

</div>
<script>
    $(function () {
        //下载
        $("#downloadFile").click(function () {
            var id = $("#taxproof").val();
            var url = "/filesUpload/download/" + id;
            window.open(url);
        });


        //tab页
        $("#tabs").on("click", ".box", function () {
            $(this).addClass("actives").parent().siblings().children().removeClass("actives");

            var text = $(this).text();
            if (text == "详细信息") {
                $("#flowImg").css("display", "none");
                $("#details").css("display", "block");
            } else if (text == "流程记录") {
                $("#flowImg").css("display", "block");
                $("#details").css("display", "none");
            }
        });


        //(批转单位->批转接收人)二级联动
        $("#endorseDepts").change(function () {
            var departCode = $("#endorseDepts option:selected").val();
            $.ajax({
                url: "/bookUser/queryUserByDept",
                type: "POST",
                dataType: "json", //返回数据形式为json
                contentType: 'application/json;charset=UTF-8',
                data: JSON.stringify({"departCode": departCode}),
                success: function (res) {

                    var item = res;
                    var html = "";
                    for (var i = 0; i < item.length; i++) {
                        html += '\
                         <option  value="' + item[i].departUser + '">' + item[i].departUser + '</option>\
                    ';


                        $("#endorseUsers").html(html);


                    }
                }
            });


        })

    })


</script>


